<template>
<div class="login">
  <div class="div-left">
    <el-card class="box-card">
  <div slot="header" >
    <span class="header-title">最新公告</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="handlemore" >更多</el-button>
  </div>
  <div>
    <el-table
      :data="tableData"
      :show-header=false
      @row-click="rowclick"
      height="250"
      style="width:100%">
    <el-table-column
      prop="title"
      align="left"
     >
    </el-table-column>
    <el-table-column
      prop="createTime"
      align="right"
     >
    </el-table-column>
  </el-table>
  </div>
</el-card>

  </div>
  <div class="div-right">
  <el-form  :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <el-tabs v-model="activeName" >
     <el-tab-pane label="用户登录" name="first">
       <!-- <h2 class="title" style="padding-left:22px;" >系统登录</h2> -->
    <el-form-item prop="account">
      <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="学号/工号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    			<el-form-item prop="type">
          <el-radio-group v-model="loginForm.type">
            <el-radio label="teacher">教师</el-radio>
            <el-radio label="student">学生</el-radio>
          </el-radio-group>
			</el-form-item>
     </el-tab-pane>
   <el-tab-pane label="管理员登录" name="second">
          <el-form-item prop="account">
      <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    			<el-form-item prop="type">
          <el-radio-group v-model="loginForm.type">
            <el-radio label="admin">超管</el-radio>
            <el-radio label="collegeAdmin">学管</el-radio>
            <el-radio label="classAdmin">班管</el-radio>
          </el-radio-group>
			</el-form-item>
    </el-tab-pane>
  </el-tabs>


    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:48%;" @click.native.prevent="reset">重 置</el-button>
      <el-button type="primary" style="width:48%;" @click.native.prevent="login" :loading="loading">登 录</el-button>
    </el-form-item>
      <el-form-item  style="float:right">
      <el-button size="mini"  type="text" @click="changePwd" >
        <img :src="require('@/assets/password.png')" style="width:20px;height:20px;"><span style="vertical-align:top;font-size: 16px">忘记密码</span>
      </el-button >
    </el-form-item>
  </el-form>
    <el-dialog
      class="login-resetPwd"
      title="重置密码"
      :visible.sync="dialogVisible">
    <el-form :model="resetPwdForm" :rules="fieldPwdRules" ref="resetPwdForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <el-form-item prop="account">
      <el-input type="text" v-model="resetPwdForm.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="email">
      <el-input type="text" v-model="resetPwdForm.email" auto-complete="off" placeholder="邮箱"></el-input>
    </el-form-item>
    <el-form-item prop="captcha"  >
      <el-input type="text" v-model="resetPwdForm.captcha" auto-complete="off" style="width:50%"  placeholder="验证码"></el-input>
      <div class = "login-code">
          <el-button  type="primary" size="mini" style="width:100%;height:40px;"  @click="getMsg" v-if="!isDisabled" ><span class="msgsize">{{btnTitle}}</span></el-button>
          <el-button  type="info" size="mini"  style="width:100%;height:40px;" v-if="isDisabled" :disabled="disabled"><span class="msgsize">{{btnTitle}}</span></el-button>
      </div>
    </el-form-item>
  </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="resetPwd">重 置</el-button>
    </span>
  </el-dialog>
  </div>
  <!-- 查看页面 -->
  	<el-dialog title="公告详情" width="40%" :visible.sync="viewDialogVisible" :close-on-click-modal="false">

		<div v-html="noticeContent">
		</div>
      		<div slot="footer" class="dialog-footer">
			<el-button size="mini" @click.native="viewDialogVisible = false">确 定</el-button>
		</div>
	</el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cookies from "js-cookie"
import ThemePicker from "@/components/ThemePicker"
export default {
  name: 'Login',
  components:{
    ThemePicker
  },
  data() {
    return {
      loading: false,
      loginForm: {
        account: '',
        password: '',
        src: ''
      },
      fieldRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '选择用户类型', trigger: 'change' }
        ]
      },
      resetPwdForm: {
        account: '',
        email: '',
        captcha:''
      },
      fieldPwdRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      checked: true,
      dialogVisible: false,
      isDisabled: false,
      btnTitle:"获取验证码",
      activeName: 'first',
      tableData:[],
      limit:6,
      noticeContent:'',
     viewDialogVisible: false,
    }
  },
  methods: {
    login() {
      this.loading = true
      let userInfo = {account:this.loginForm.account, password:this.loginForm.password,type:this.loginForm.type}
      this.$api.login.login(userInfo).then((res) => {
          if(res.msg != null) {
            console.log(res.msg != null)
            this.$message({
              message: res.msg,
              type: 'error'
            })
          } else {
            Cookies.set('token', res.data.token) // 放置token到Cookie
            sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
            sessionStorage.setItem('token', res.data.token) // 保存用户到本地会话
            this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
            this.$router.push('/')  // 登录成功，跳转到主页

          }
          this.loading = false
        }).catch((res) => {
          this.$message({
          message: res.message,
          type: 'error'
          })
        });
    },
    reset() {
      this.$refs.loginForm.resetFields()
    },
    changePwd(){
      this.dialogVisible = true
    },
    resetPwd(){
        this.$refs["resetPwdForm"].validate(valid => {
        if (valid) {
           let userInfo = {account:this.resetPwdForm.account, email:this.resetPwdForm.email,captcha:this.resetPwdForm.captcha}
          this.$api.login.resetPwd(userInfo).then((res) => {
              if(res.msg != null) {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              } else {
                this.$router.push("/login")
              }
            }).catch((res) => {
              this.$message({
              message: res.message,
              type: 'error'
              })
            })
            this.dialogVisible = false
				}
        })

    },
    getMsg(){
      if(this.resetPwdForm.account == '' || this.resetPwdForm.email == '' ){
           this.$message({
              message: "请填写用户或邮箱",
              type: 'error'
            })
          return
      }
      let userInfo = {account:this.resetPwdForm.account, email:this.resetPwdForm.email}
      this.$api.login.sendCaptcha(userInfo).then((res) => {
          if(res.msg != null) {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          } else {
            this.timeCount();
          }
        }).catch((res) => {
          this.$message({
          message: res.message,
          type: 'error'
          })
        });

    },
        //短信验证码倒计时
    timeCount(){
      const TIME_COUNT = 60
      this.count = TIME_COUNT
      this.timer = window.setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT){
            this.count--
            this.btnTitle = this.count + 's后重新获取'
            this.isDisabled = true
            this.disabled = true
          } else {
            this.btnTitle = '获取验证码'
            this.isDisabled = false
            this.disabled = false
            clearInterval(this.timer)
            this.timer = null
          }
      }, 1000)
    },
    handlemore(){
      if(this.limit - this.tableData.length >= 6){
          this.$message({message: '已经全部展示了' , type: 'error'})
          return
      }
      this.limit = this.limit +5
      this.selectNotice(this.limit)
    },
    selectNotice(limit){
       this.$api.sysNotice.findListByLimit({limit:limit}).then(res =>{
            if(res.code == 200){
                this.tableData = res.data
            }
          })
    },
    rowclick(row, column, event) {
			this.viewDialogVisible = true
			this.noticeContent = row.content
    },
  },
  mounted() {
    this.selectNotice(5)
  },
  computed:{
  }
}
</script>

<style lang="scss" scoped>
 .header-title {
   margin-left: -550px;
   font-size: 20px;
 }
 .login {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150%;
      background-image: url("../assets/login.jpeg");
      background-size: cover;
    }
  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 100px auto;
    width: 400px;
    padding: 35px 35px 50px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
    .login-code {
      width: 48%;
      height: 35px;
      float: right;
      padding-right: 0px;
    }

  }
  .div-left{
    display: inline;
  }
  .div-right{
    display: inline;
    margin-left: 20px;
  }
    .text {
    font-size: 14px;
    text-align: left;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {

    margin: 100px auto;
    width: 600px;
    height: 310px;
    padding: 35px 35px 50px 35px;
    background: #fff;
  }
</style>
